<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: white;
    }

    .box {
        width: auto;
        height: auto;
        display: inline-block;

    }

    img {
        /* 设置图像外边距 */
        /* 图片设置内阴影无效 */
        margin: 100px;
        border-radius: 5px;
        transition-property: opcity,transform;
        transition: .5s;
        /* 先设置白色阴影，再设置彩色阴影 */
        box-shadow: 0 0 0 25px white, -40px -40px 0 0 #FF9966, 40px 40PX 0 0 #FFCCCC;
        opacity: 0.9;
    }

    img:hover {
        opacity: 1;
        /* 斜切效果 */
        transform: skew(2deg);
    }
</style>
<body>
    <img width="400" height="200" src="https://browser6.qhimg.com/dm/768_432_/t11e5ce71a4f88584c5513e3fd4.jpg" alt="">
    <img width="400" height="200" src="https://browser6.qhimg.com/dm/768_432_/t11e5ce71a40dd3c211c3a56ace.jpg" alt="">
    <img width="400" height="200" src="https://browser6.qhimg.com/dm/768_432_/t11e5ce71a492777f559dab9afb.jpg" alt="">
</body>

</html>